<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="example1">
			
			<blog-component title="my blog"></blog-component>
			<blog-component title="my blog2"></blog-component>
			<blog-component title="my blog3"></blog-component>
		
			
			<blog-component v-for="e in posts" v-bind:title="e.title" v-bind:key="e.id" ></blog-component>
		</div>	
		<!-- 
		通过prop 向组件传递数据
		当然prop 也可以传递对象过去
		 -->
		<script type="text/javascript">
			Vue.component('blog-component',{
				props:['title'],
				template:'<h3>{{title}}</h3>',
			})
			let app=new Vue({
				el:'#example1',
				data:{
					counter:0,
					enterValue:'',
					 posts: [
					      { id: 1, title: 'My journey with Vue' },
					      { id: 2, title: 'Blogging with Vue' },
					      { id: 3, title: 'Why Vue is so fun' }
					    ],
					
				},
			})
		</script>	
		<style type="text/css">
			
		</style>
	</body>
</html>
